<template>
    <div>
        
      <div class="banner">
      <van-swipe
        :autoplay="3000"
        indicator-color="#fff"
        width="20px"
        height="20px"
      >
        <van-swipe-item v-for="(item, index) in recommendBanner" :key="index" @click="toBanner(item.id)">
          <img v-lazy="item.model.cover" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="recommend-list"
    >
      <ul class="list">
        <li  v-for="(item, index) in recommendList"
          :key="index" @click=toVideo(item.children[0].model.resource.id)>
          <a href="javascript:;">
            <img v-lazy="item.children[0].model.resource.cover" alt="" />
            <h4>{{ item.children[0].model.resource.title }}</h4>
            <span>{{item.children[0].model.resource.author?.userinfo.username}}</span>
          </a>
        </li>
      
      </ul>
    </div>

    </div>
</template>
<script>
import axios from "axios";
import VueAxios from "vue-axios";
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
  name: "HomeView",
  data() {
    return {
      recommendList: [],
      isLoading: false,
      recommendBanner: [
          
      ],
      arr: [],
      page:3,
    };
  },
  methods:{
    getRecommended(page){
      axios({
        url:"https://apis.netstart.cn/xpc/home/recommend",
        method:"get",
       params:{
         page,
       } 
      }).then((res) => {
        if (res.status == 200) {
          this.recommendBanner = res.data.data.children[0].children;
          console.log(this.recommendBanner);
          console.log(res);
          this.recommendList = res.data.data.children;
          this.recommendList = this.recommendList.slice(1);
          this.isLoading = false
          this.recommendBanner.forEach(item=>{
            // item.model.link = item.model.cover.replace("http://","https://")
            const reg =/(?<=%2F)\w+(?=%)/;
            let arr = item.model.link.match(reg)[0];
            item.id=arr;
          })
        }
      });
    },
    toVideo(id){
      this.$router.push({
        path: "/Video",
        query: {id: id},
      });
    },
    onRefresh() {
      setTimeout(() => {
        this.getRecommended();
        this.isLoading = false;
      }, 1000);
    },
    toBanner(id){
       // 以字母e开头的正则
        const reg =/e\d+/;
      if (reg.test(id)) {
      this.$router.push({
        path: "/banner",
        query: {id: id},
      });
    }
    },
  
    
  },
  mounted() {
    this.getRecommended(this.page)
  },
 
};

</script>
<style lang="scss" scoped>

.recommend-list {
  width: 730px;
  padding: 10px;
  margin-top: 15px;
  padding-bottom: 60px;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 45vw;
      height: 45vw;
      background-color: #fff;
      display: flex;
      border-radius: 15px;
      margin-left: 5px;
      margin-bottom: 20px;
      img {
        width: 45vw;
        height: 26.57vw;
      }
      h4 {
        color: #000;
        margin-bottom: 10px;
        font-size: 26px;
      }
      span {
        color: #999999;
        font-size: 16px;
      }
    }
  }
}
</style>
<style lang="scss">
.banner {
  width: 94.686vw;
  height: 51vw;
  border-radius: 20px;
  margin-left: 10px;
  overflow: hidden;
  img {
    width: 94.686vw;
    height: 51vw;
    // border-radius: 20px;
  }
  .van-swipe__indicator {
    width: 14px;
    height: 14px;
  }
}
</style>